<template>
  <div>
    <h1>个人信息</h1>
    <div class="centerBox">
      <el-form ref="form" :model="form" label-position="left" label-width="80px" >
        <el-form-item label="用户名">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="性别" >
          <el-radio-group v-model="form.resource">
            <el-radio label="男"></el-radio>
            <el-radio label="女"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="个性签名">
          <el-input type="textarea" v-model="form.desc"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">保存用户信息</el-button>
          <!--      <el-button>取消</el-button>-->
        </el-form-item>
      </el-form>
    </div>
    <!--      <el-form-item label="邮箱">-->
    <!--        <el-input v-model="form.email"></el-input>-->
    <!--      </el-form-item>-->
    <!--      <el-form-item label="验证码">-->
    <!--        <el-input v-model="form.reemail"></el-input>-->
    <!--      </el-form-item>-->
    <!--      <el-form-item>-->
    <!--        <el-button type="primary" >发送验证码</el-button>-->
    <!--        &lt;!&ndash;      <el-button>取消</el-button>&ndash;&gt;-->
    <!--      </el-form-item>-->
    <!--      <el-form-item label="新密码">-->
    <!--        <el-input v-model="form.password"></el-input>-->
    <!--      </el-form-item>-->
  </div>

</template>

<script>
export default {
  name: "userdetail",
  data() {
    return {
      form: {
        name: '',
        resource: '',
        desc: ''
      },
    }
  },
  methods: {
    onSubmit() {
      console.log(this.form.desc)
      axios.get("http://localhost:8181//updata?uid=" + this.$store.state.uid + "&name="+ this.form.name
          + "&sex=" + this.form.resource + "&autograph=" + this.form.desc).then((t) => {
            console.log(t)
      })
    }
  },
mounted () {
  console.log(this.$store.state.uid)
  axios.get("http://localhost:8181//selectuserdata?id=" + this.$store.state.uid).then((t) => {
      console.log(t)
      this.form.name = t.data.name;
      this.form.resource = t.data.sex;
      this.form.desc = t.data.autograph;
  })
}

}
</script>
<style scoped>
.centerBox {
  position: absolute;
  top: 20%;
  left: 30%;
  right: 30%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
  padding-top: 20px;
  padding-left: 20px;
  padding-right: 30px;
}
</style>